<!--
 * @Author: your name
 * @Date: 2020-04-15 22:53:22
 * @LastEditTime: 2020-11-06 14:56:02
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \cloudEdu\src\views\personalCenter\index.vue
 -->
<template>
  <div class="percenter">
    <pageHeader></pageHeader>
    <div class="user-center">
      <div class="user-banner flex-r">
        <div class="user-pic">
          <img :src="userInfo.pictureUrl ? config.imgPath + userInfo.pictureUrl : userPic" />
        </div>
        <div class="user-info-right">
          <div class="user-info-title">
            <div class="user-info-title-top">
              <router-link target="_blank" :to="{ path: '/personalcenter/userInfo', query: { id: '1' } }">
                <p>{{ userInfo.username }}</p>
              </router-link>
            </div>
            <div class="user-info-title-bottom">
              <el-button icon="el-icon-edit-outline" size="small" @click="editUserInfo" round class="upadte-user-info">编辑个人资料</el-button>
              <el-popover placement="top-start" title="积分规则" width="200" trigger="hover">
                <div>
                  “智建通”学习平台将对以下学习行为进行积分，规则如下：<br />
                  登录签到: <br />每日首次登录签到积1分<br />
                  学习: <br />每有效观看一个视频积一分<br />
                  每日答题:<br />
                  每日答题分数在95分以上积2分
                </div>
                <el-button icon="el-icon-tickets" size="small" slot="reference" round>积分规则</el-button>
              </el-popover>
            </div>
          </div>
          <div class="user-info-other">
            <div class="user-integration" @click="goScorePage">
              <div class="user-key">
                <span class="user-num">{{ scoreNum }}</span>
              </div>
              <div class="user-unit">积分</div>
            </div>
            <div class="user-collect" @click="goCollectPage">
              <div class="user-key">
                <span class="user-num">{{ collectNum }}</span>
              </div>
              <div class="user-unit">收藏</div>
            </div>
            <div class="user-message" @click="goMessagePage">
              <div class="user-key">
                <span class="user-num">{{ msgNum }}</span>
              </div>
              <div class="user-unit">消息</div>
            </div>
          </div>
        </div>
      </div>
      <div class="user-content">
        <div class="user-tabs">
          <div class="user-study" @click="ontabs(1)" v-bind:class="{ 'bottom-line': flag == '1' }">我的学习</div>
          <div class="exam-record" @click="ontabs(2)" v-bind:class="{ 'bottom-line': flag == '2' }">考试记录</div>
        </div>
        <div class="user-state"></div>
        <my-learn class="user-state" v-if="flag == 1"></my-learn>
        <exam-record class="user-state" v-if="flag == 2"></exam-record>
      </div>
    </div>
    <pageFooter></pageFooter>
  </div>
</template>
<script>
import pageHeader from "@/components/PageHeader.vue";
import pageFooter from "@/components/PageFooter.vue";
import myLearn from "./pages/myLearn.vue";
import examRecord from "./pages/examRecord.vue";
export default {
  components: {
    pageHeader,
    pageFooter,
    myLearn,
    examRecord
  },
  data() {
    return {
      userPic: require("@/assets/imgs/at1.png"),
      flag: 1,
      userInfo: "",
      scoreNum: 0,
      collectNum: 0,
      msgNum: 0,
      learnRecord: []
    };
  },
  created() {
    //个人信息
    this.getUserInfo();
    //积分信息
    this.getScoreInfo();
    //收藏信息
    this.getCollectInfo();
    //学习记录
    // this.getLearningRecord();
    //系统消息
    this.getSystemMsg();
  },
  methods: {
    getUserInfo() {
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          url: "/wisdomlearn/user/v1/queryuserInfo",
          method: "post",
          headers: {
            accessToken: that.config.token,
            appId: that.config.appId,
            userId: JSON.parse(that.tool.getCookie("xinyun-front-userInfo")).userId,
            clientId: "",
            sign: that.tool.sign("/wisdomlearn/user/v1/queryuserInfo", time),
            timestamp: time
          }
        })
        .then(res => {
          if (res.retCode == "00000") {
            that.userInfo = res.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getScoreInfo() {
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          url: "/wisdomlearn/score/v1/queryTotalScore",
          method: "post",
          headers: {
            accessToken: that.config.token,
            appId: that.config.appId,
            userId: JSON.parse(that.tool.getCookie("xinyun-front-userInfo")).userId,
            clientId: "",

            sign: that.tool.sign("/wisdomlearn/score/v1/queryTotalScore", time),
            timestamp: time
          }
        })
        .then(res => {
          if (res.data) {
            this.scoreNum = res.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getCollectInfo() {
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          //url: "/wisdomlearn/userCollection/selectAllUserCollection",
          url: "/wisdomlearn/courseware/selectAllCourseware",

          method: "post",
          headers: {
            accessToken: that.config.token,
            appId: that.config.appId,
            userId: JSON.parse(that.tool.getCookie("xinyun-front-userInfo")).userId,
            clientId: "",
            sign: that.tool.sign("/wisdomlearn/courseware/selectAllCourseware", time),
            //  sign: that.tool.sign(
            //   "/wisdomlearn/userCollection/selectAllUserCollection",
            //   time
            // ),

            timestamp: time
          },
          // data: {
          //   type: "1",
          //   pageIndex: "1",
          //   pageSize: "10"
          // }
          data: {
            orderType: "all",
            pageIndex: "1",
            pageSize: "100"
          }
        })
        .then(res => {
          // if (res.data) {
          //   this.collectNum = res.data.total;
          // }
          if (res.data) {
            let num = 0;
            res.data.list.forEach(elem => {
              num += parseInt(elem.collectionNum);
            });
            this.collectNum = num;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getLearningRecord() {
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          url: "/wisdomlearn/userLearnRecords/selectAllRecords",
          method: "post",
          headers: {
            accessToken: that.config.token,
            appId: that.config.appId,
            userId: JSON.parse(that.tool.getCookie("xinyun-front-userInfo")).userId,
            clientId: "",
            sign: that.tool.sign("/wisdomlearn/userLearnRecords/selectAllRecords", time),
            timestamp: time
          },
          data: {
            pageIndex: "1",
            pageSize: "10"
          }
        })
        .then(res => {
          if (res.data.list.length > 0) {
            this.learnRecord = res.data.list;
          }
          // this.learnRecord;
          //   that.userInfo = res.data;
          // }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getSystemMsg() {
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          url: "/wisdomlearn/base/selectAllSysMssage",
          method: "post",
          headers: {
            accessToken: that.config.token,
            appId: that.config.appId,
            userId: JSON.parse(that.tool.getCookie("xinyun-front-userInfo")).userId,
            clientId: "",
            sign: that.tool.sign("/wisdomlearn/base/selectAllSysMssage", time),
            timestamp: time
          },
          data: {
            pageIndex: "1",
            pageSize: "10"
          }
        })
        .then(res => {
          this.msgNum = res.data.total;
          // msgNum
          // if (res.data.list.length > 0) {
          //   this.learnRecord = res.data.list;
          // }
        })
        .catch(err => {
          console.log(err);
        });
    },
    ontabs(id) {
      this.flag = id;
    },
    goScorePage() {
      this.$router.push({ path: "/personalcenter/score" });
    },
    goCollectPage() {
      // this.$router.push({ path: "/personalcenter/collect" });
    },
    goMessagePage() {
      this.$router.push({ path: "/personalcenter/message" });
    },
    editUserInfo() {
      this.$router.push({ path: "/personalcenter/userInfo" });
    }
  }
};
</script>
<style scoped>
.user-center {
  min-width: 1200px;
}
.bottom-line {
  border-bottom: 4px solid #1968bb;
}
.user-study {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.exam-record {
  display: flex;
  align-items: center;
  margin-left: 100px;
  cursor: pointer;
}
.user-tabs {
  font-size: 24px;
  display: flex;
  height: 90px;
  background-color: #fff;
  width: 1200px;
  margin: 0 auto;
}
.user-pic img {
  width: 132.8px;
  height: 132.8px;
  border-radius: 50%;
  text-align: center;
}
.user-key {
  display: flex;
  justify-content: center;
}
.user-num {
  cursor: pointer;
}
.user-unit {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.user-info-title-top {
  height: 50%;
  font-size: 30px;
  color: white;
}
.user-info-title-top p {
  font-size: 36px;
  color: #f8fafc;
  letter-spacing: 0.14px;
}
.user-info-title-bottom {
  height: 50%;
  margin-top: 20px;
}
.user-info-title-bottom .el-button {
  background: transparent;
  color: #fff;
}
.user-integration {
  border-right: 1px solid white;
  flex: 1;
  cursor: pointer;
}
.user-collect {
  border-right: 1px solid white;
  flex: 1;
  cursor: pointer;
}
.user-message {
  flex: 1;
  cursor: pointer;
}
.user-info-other {
  display: flex;
  width: 60%;
  padding-top: 20px;
  color: white;
  font-size: 20px;
}
.user-info-title {
  width: 40%;
  height: 100%;
}
.user-banner {
  position: relative;
  min-height: 328px;
  background-image: linear-gradient(180deg, #2588f0 1%, #1088bc 100%);
  border: 1px solid #979797;
}
.user-pic {
  width: 132.8px;
  height: 132.8px;
  border-radius: 132.8px;
}
.user-img {
  width: 100px;
  height: 100px;
}
.user-info {
  flex: 1;

  padding-top: 30px;
}
.user-info-right {
  width: 827px;
  height: 100px;
  display: flex;
  margin-left: 46px;
}
.user-content {
  min-height: 100px;
}
.upadte-user-info {
  margin-right: 15px;
}
</style>
